<script setup lang="ts">
import { ref, Ref, defineEmits } from "vue";
import { ElMessageBox } from "element-plus";

const emit = defineEmits(["cropperNotified"]);
const props = defineProps({
  imgUrl: {
    type: String,
    default: "",
    required: true,
  },
});

const cropper: Ref<any> = ref(null);
const options = ref({
  size: 1,
  full: false,
  fixedBox: false,
  autoCrop: true,
  centerBox: true,
  fixed: true,
  autoCropWidth: "45vw",
  autoCropHeight: "49vh",
  outputSize: "1",
  fixedNumber: [1, 1]
});

const savePhoto = () => {
  ElMessageBox.confirm("确认要提交当前得截图区域", "注意", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    cropper.value.getCropData((data: string) => {
      emit("cropperNotified", data);
    });
  });
};
</script>

<template>
  <div class="cropper-box">
    <vue-cropper ref="cropper" autoCrop: autoCrop :img="imgUrl" centerBox: centerBox
    fixed:fixed outputSize:outputSize :auto-crop-width="options.autoCropWidth"
    :auto-crop-height="options.autoCropHeight" :fixedBox="options.fixedBox"
    :fixedNumber="options.fixedNumber" />
  </div>
  <button class="operation-button" @click="savePhoto()">确定选中的图像区域</button>
</template>

<style scoped>
.cropper-box {
  width: 45vw;
  height: 49vh;
  margin: 20px auto 30px auto;
}

.operation-button {
  width: 60%;
  line-height: 36px;
  font-size: 16px;
  display: block;
  margin: 0 auto;
}
</style>
